<template>
    <div id="map-container"></div>
</template>

<script>
import * as mapvthree from 'mapv-three';
import { BMPGL } from "@/api/dormitory/basedata/map";

export default {
    name: 'MapScene',
    mixins: [],
    props: {
        msg: String
    },
    data() {
        return {
            config: {
                center: [116.3899980, 39.9099206, 0],
                pitch: 60,
                zoom: 18
            },
            mixerArr: [],
            prevTime: Date.now()
        }
    },
    create() {

    },
    mounted() {
        BMPGL("v4IHCArNtanaRf3pTg3itC8HgQ5oeihp").then(async (BMapGL) => {
            const center = [108.4, 22.843];
            let map = new BMapGL.Map("map-container");    // 创建Map实例
            map.centerAndZoom(new BMapGL.Point(108.3575, 22.8434), 19);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);

            map.addEventListener('click', function (e) {
                alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
            });

            var mapStyle = {
                features: ["road", "building", "water", "land"],//隐藏地图上的"poi",
                style: "dark",
            };
            map.setMapStyle(mapStyle);

            const engine = new mapvthree.Engine(map, {
                rendering: {
                    enableAnimationLoop: true,
                }
            });



            engine.map.setCenter(center);
            engine.map.setPitch(60);

            // 添加天空(提供光照)
            const sky = engine.add(new mapvthree.EmptySky());
            sky.time = 3600 * 14;

            // 添加其他
            const pillar = engine.add(new mapvthree.Pillar({
                height: 300,
                radius: 50,
                radialSegments: 32,
            }));
            // let data = await mapvthree.GeoJSONDataSource.fromGeoJSON([{
            //     "properties": {},
            //     "geometry": {
            //         "type": "Point",
            //         "coordinates": center
            //     }
            // }]);
            // pillar.dataSource = data;

            engine.event.bind('click', e => {
                data.add(new mapvthree.DataItem(e.point));
            });


        }).catch((err) => {
            console.log(err)
        })

    },
    methods: {

    }
}
</script>

<style scoped>
#map-container {
    width: 100%;
    height: 700px;
}
</style>